<template>
    <div>
        <van-nav-bar  title="我参与的活动"  left-arrow @click-left="$router.go(-1)"/>
        <van-tabs v-model="active" @click="joinActive">
        <!-- 社区活动 -->
            <van-tab title="社区活动">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <van-cell class="news-content" v-for="item in lists"  @click="actiList(item.id)" :key="item.id" >
                        <ul>
                        <li  class="acti-list">
                            <div class="acti-img">
                                <img :src="item.activeImg" alt="">
                            </div>
                            <div class="acti-box">
                                <p class="acti-title">{{item.activeTitle}}</p>
                                <div class="acti-content">
                                    <p >活动时间：<label >{{item.startTime}}</label></p>
                                    <p >活动地址：<label >{{item.activeAddress}}</label></p>
                                </div>
                            </div>
                            <div :class="{'prompt':item.activeStatus == 1,'over':item.activeStatus == 3,'hot':item.activeStatus == 2}">
                                <label v-if="item.activeStatus==1">进行中</label>  
                                <label v-else-if="item.activeStatus==3">已结束</label>  
                                <label v-else>火热报名</label>  
                            </div>
                        </li> 
                        </ul>
                    </van-cell>
                </van-list>
            </van-tab>
            <!-- 志愿者活动 -->
            <van-tab title="志愿者活动">
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell class="news-content" v-for="item in lists"  @click="actiList(item.id)" :key="item.id" >
                    <ul>
                        <li  class="acti-list">
                            <div class="acti-img">
                                <img :src="item.activeImg" alt="">
                            </div>
                            <div class="acti-box">
                                <p class="acti-title">{{item.activeTitle}}</p>
                                <div class="acti-content">
                                    <p >活动时间：<label >{{item.startTime}}</label></p>
                                    <p >活动地址：<label >{{item.activeAddress}}</label></p>
                                </div>
                            </div>
                            <!-- 右上角提示 -->
                            <div :class="{'prompt':item.activeStatus == 1,'over':item.activeStatus == 3,'hot':item.activeStatus == 2}">
                              <label v-if="item.activeStatus==1">进行中</label>  
                              <label v-else-if="item.activeStatus==3">已结束</label>  
                              <label v-else>火热报名</label>  
                          </div>
                        </li> 
                    </ul>
                </van-cell>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import apiHttp from '../../../../api/index'
 import { Toast } from 'vant';
export default {
    data(){
        return{
            loading: false,
            finished: false,
            active:sessionStorage.getItem('joinActive') ? sessionStorage.getItem('joinActive') : 0,
            pageSize:10,
            userId:sessionStorage.getItem('userId'),
            type:1,
            lists:[],
            page:0,
            total:-1,
        }
    },
    watch:{
        active(newVal,oldVal){
           this.loading = true
          this.finished = false
           this.lists = []
            this.total = -1
            this.page = 0
            if(newVal == 0){
                this.type = 1
            }else{
                this.type = 2
            }
            this.onLoad()
        }
    },
    mounted(){},
    methods:{
        joinActive(){
            sessionStorage.setItem('joinActive',this.active)
        },
        onLoad(){
            if(this.lists.length == this.total){
                this.finished  = true
          		this.loading = false 
            }else{
                this.page++
                this.getMyActivityList()
            }
        },
        // 活动列表
        getMyActivityList(){
            let parmes = {
                page:this.page,
                pageSize:this.pageSize,
                userId:this.userId,
                type:this.type,
            }
            apiHttp.comIndex.getMyActivityList(parmes,resp=>{
              if(resp.resultCode == '000000'){
                this.total = resp.data.total
                for(let i = 0; i < resp.data.actList.length; i++){
                  this.lists.push(resp.data.actList[i])
                  }
                this.total = resp.data.total
                this.loading = false 
              }else{
                Toast(resp.resultMsg)
              }
            })
        },
        // 跳转到活动详情
        actiList(id){
            this.$router.push( {name: "ActivityList",query: { id: id}})
        },
    } 
}
</script>
<style scoped>
@import '../../../../assets/css/index.css';
.van-cell{
    width: 90%;
}
.news-content{
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}
.acti-img{
    height: 7rem;
    border-radius:10px;
}
.acti-img img{
    border-radius:4px;
}
.acti-box{
    padding: 0.5rem 0.5rem 0 0.5rem;
}
.acti-title{
    font-size: 0.65rem;
    font-weight: 600;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.acti-content p label{
    color: #999999;
}
.acti-list{
    position: relative;
}
/* 进行中 */
.prompt{
    position: absolute;
    top: 0;
    right: -3rem;
    width: 0;
    height: 0;
    border-width:3rem;
    border-style: solid;
    border-color: #27C86B transparent transparent transparent;
}
/* 已结束 */
.over{
    position: absolute;
    top: 0;
    right: -3rem;
    width: 0;
    height: 0;
    border-width:3rem;
    border-style: solid;
    border-color: #FF9C00 transparent transparent transparent;
}
/* 火热报名 */
.hot{
    position: absolute;
    top: 0;
    right: -3rem;
    width: 0;
    height: 0;
    border-width:3rem;
    border-style: solid;
    border-color: #D33043 transparent transparent transparent;
}
.prompt label,.over label{
    position: absolute;
    top: -2.4rem;
    left: -2rem;
    font-size: 0.55rem;
    width: 2rem;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    color: #ffffff;
}
.hot label{
    position: absolute;
    font-size: 0.55rem;
    top: -2.2rem;
    left: -2.2rem;
    width: 3rem;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    color: #ffffff;
}
</style>

